<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>Login</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""
    />
    <script src="js/axios.min.js"></script>
    <script src="js/query.js"></script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <!-- Font-Awesome-Icons-CSS -->

    <script>
        var loginUser;
        var user;
        window.onload = function () {
            findAll();
            getUser();
        }

        function getUser() {
            axios.get("/user/getUser").then(resp => {
                loginUser = resp.data;
            })
        }

        function findAll() {
            axios.get("user/findAll").then(resp => {
                var info = resp.data;
                var str = "";
                info.forEach(n => {
                    str += `<tr><td>${n.name}</td><td>${n.realName}</td><td>${n.grade}</td>
            <td><input type="button" value="修改等级" onclick="g_3(${n.id})"></td><td><input type="button" value="删除" onclick="del(${n.id})"></td></tr>`;
                });
                $n("data").innerHTML = str;
            });
        }

        function del(id) {
            axios.get("user/del", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                console.log(info);
                if (info === "OK") {
                    alert("删除成功");
                } else if (info === "NO") {
                    alert("无法删除自己");
                }
                findAll();
            });
        }

        function g() {
            $n("addDiv").style.visibility = "visible";
        }

        function g_2() {
            $n("addDiv").style.visibility = "hidden";
        }

        function add() {
            axios.get("user/add", {
                params: {
                    userName: $n("userName").value,
                    name: $n("name").value,
                    grade: $n("grade").value,
                }
            }).then(resp => {
                var info = resp.data;
                if (info == "OK") {
                    $n("grade").value = "",
                        $n("name").value = "",
                        $n("userName").value = "",
                        alert("添加成功");
                    g_2();
                    findAll();
                } else {
                    alert("用户名不能重复，添加失败");
                }
            });
        }

        function g_3(id) {
            $n("updateDiv").style.visibility = "visible";
            axios.get("user/findById", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                user = info;
                var un = user.name
                var u = user.realName
                var d = user.grade
                $n("userName2").value = un;
                $n("name2").value = u;
                $n("grade2").value = d;
            })

        }

        function g_4() {
            $n("updateDiv").style.visibility = "hidden";
        }

        function updateGrade() {
            axios.get("user/updateGrade", {
                params: {
                    id: user.id,
                    grade: $n("grade2").value
                }
            }).then(resp => {
                var info = resp.data;
                if (info == "OK") {
                    alert("修改成功");
                    g_4();
                    findAll();
                }
            });
        }
    </script>

</head>
<div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>

<div style="margin-left: 200px;margin-top: 100px;background-color: white;width: 500px;height: 300px;text-align: center">
    <table style="width: 500px">
        <tr style="border: 5px solid black">
            <th>用户名</th>
            <th>真实姓名</th>
            <th>等级</th>
            <th>操作</th>
        </tr>
        <tr style="height: 30px ;width: auto"></tr>
        <tbody id="data" style="text-align: center;margin-top: 30px">

        </tbody>
    </table>
</div>

<div style="text-align: center;width:700px">
    <input type="button" value="添加用户" onclick="g()">
</div>
<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="addDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        用户名：<input type="text" id="userName"><br>
        真实姓名：<input type="text" id="name"><br>
        用户等级：<select id="grade">
        <option>班主任</option>
        <option>房间管理员</option>
        <option>系统管理员</option>
        <option>超级管理员</option>
    </select><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" value="返回" onclick="g_2()">
    </div>
</div>

<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="updateDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        用户名：<input type="text" id="userName2" value="1" disabled><br>
        真实姓名：<input type="text" id="name2" value="2" disabled><br>
        用户等级：<select id="grade2">
        <option>班主任</option>
        <option>房间管理员</option>
        <option>系统管理员</option>
        <option>超级管理员</option>
    </select><br>
        <input type="button" value="修改" onclick="updateGrade()">
        <input type="button" value="返回" onclick="g_4()">
    </div>
</div>
<!-- //content -->

<!-- Jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- //Jquery -->

<!-- effect js -->
<script src="js/canva_moving_effect.js"></script>
<!-- //effect js -->
</html>